<template>
	<div>
		<UPLOAD v-if="upload">

		</UPLOAD>
		<el-container class="todo-container" v-if="show">
			<el-header>
				<el-row>
					<el-col :span="4">
						<el-input type="text" v-model="searchWord" placeholder="请输入菜单名称搜索" />
					</el-col>
					<el-col :span="20">
						<div class="todo-wrap">
							<ConsumFooter :todos="todos" :checkAllTodo="checkAllTodo" :listNumber="listNumber"
								:datas="datas" />
						</div>
					</el-col>
				</el-row>
			</el-header>
			<el-main>
				<el-row style="background: rgba(0, 142, 228, 0.8); font-size: 1vw; padding: 2px;color:white">
					<el-col :span="3"><span>选择</span></el-col>
					<el-col :span="5"><span>编号</span></el-col>
					<el-col :span="5">
						<span>图片</span>
					</el-col>
					<el-col :span="5"><span>名称</span></el-col>
					<el-col :span="5"><span>价格</span></el-col>
				</el-row>
				<div class="todo-wrap">
					<ConsumList :searchWord="searchWord" :fillTodo="fillTodo" :showFlag="showFlag"
						:checkTodo="checkTodo" style="background: white" />
				</div>
				<div class="todo-wrap">
					<ConsumFooter :todos="todos" :checkAllTodo="checkAllTodo" :listNumber="listNumber" :datas="datas" />
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	import UPLOAD from "./upload.vue";
	import ConsumList from "./ConsumList.vue";
	import ConsumFooter from "./ConsumFooter.vue";
	export default {
		name: "userConsumption",
		components: {
			ConsumList,
			ConsumFooter,
			UPLOAD
		},
		data() {
			return {
				searchWord: "",
				//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
				todos: [],
				fillTodo: [],
				listNumber: [],
				datas: [],
				upload: true,
				show: false
			};
		},
		created() {
			this.$axios({
				method: "get",
				url: "/queryFoodsList",
				headers: {
					"Content-Type": "application/json"
				},
			}).then((res) => {
				if (res.data.code == 200) {
					this.upload = false;
					this.show = true;
					for (var i in res.data.data) {
						this.fillTodo.push({
							id: res.data.data[i]["foodId"],
							title: res.data.data[i]["name"],
							done: false,
							price: res.data.data[i]["price"]
						})
						this.todos.push({
							id: res.data.data[i]["foodId"],
							title: res.data.data[i]["name"],
							done: false,
							price: res.data.data[i]["price"]
						})
					}
				}





			}).catch((e) => {
				console.log(e);
			});
		},

		methods: {
			//勾选or取消勾选一个todo
			checkTodo(id, title, money) {

				if (this.listNumber.indexOf(id) < 0) {
					this.listNumber.push(id)
					this.datas.push({
						"consDemo": title,
						"money": money
					})
				} else {
					for (let i in this.datas) {
						if (this.datas[i].id === id) {
							this.datas.splice(i, 1)
						}
					}
					this.listNumber.splice(this.listNumber.indexOf(id), 1)
				}
				this.todos.forEach((todo) => {
					if (todo.id === id) todo.done = !todo.done;
				});
			},
			//全选or取消全选
			checkAllTodo(done) {
				this.todos.forEach((todo) => {
					todo.done = done;
				});
			},
			// 支付弹窗
			showFlag() {
				this.show = true
				alert('k')
			}
		},

		watch: {
			searchWord: {
				immediate: true,
				handler(val) {
					this.fillTodo = this.todos.filter((v) => {
						return v.title.indexOf(val) !== -1;
					});
				},
			},
		},
	};
</script>

<style scoped>
	body {
		background: #fff;
	}

	.el-container {
		text-align: center;
	}

	.el-header {
		height: 5vh !important;
	}

	.btn {
		display: inline-block;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
			0 1px 2px rgba(0, 0, 0, 0.05);
		border-radius: 4px;
	}

	.btn-danger {
		color: #fff;
		background-color: #da4f49;
		border: 1px solid #bd362f;
	}

	.btn-danger:hover {
		color: #fff;
		background-color: #bd362f;
	}

	.btn:focus {
		outline: none;
	}

	.todo-container {
		width: 95%;
		margin: 0 auto;
	}
</style>
